

{#{% macro m_button_check(pass_url, unpass_url) %}#}
{#    <form action="{{ pass_url }}" method="post" style="display: inline;">#}
{#        <button type="submit" class="btn btn-success">可通过</button>#}
{#    </form>#}
{#    <form action="{{ unpass_url }}" method="post" style="display: inline;">#}
{#        <button type="submit" class="btn btn-danger">不通过</button>#}
{#    </form>#}
{#{% endmacro %}#}
{##}
{#{% macro m_button_like(liked, like_url, unlike_url) %}#}
{#    <form action="{{ like_url if not liked else unlike_url }}" method="post">#}
{#        {% if liked %}#}
{#            <button type="submit" class="btn btn-info">取消</button>#}
{#        {% else %}#}
{#            <button type="submit" class="btn btn-primary">点赞</button>#}
{#        {% endif %}#}
{#    </form>#}
{#{% endmacro %}#}
{##}

{##}
{#{% macro m_prove(status, unpass=0) %}#}
{#    {% if status == 0 %}#}
{#        <div class="alert alert-warning" role="alert">#}
{#            未提交或未审核#}
{#        </div>#}
{#    {% elif status == 1 and unpass == 1 %}#}
{#        <div class="alert alert-danger" role="alert">#}
{#            审核失败#}
{#        </div>#}
{#    {% elif status == 1 and unpass == 0%}#}
{#        <div class="alert alert-success" role="alert">#}
{#            审核成功#}
{#        </div>#}
{#    {% endif %}#}
{##}
{#{% endmacro %}#}
{##}

{% macro Head(head) %}
    {% if head.sort %}
        <span class="badge bg-primary">{{ head.sort | safe }}</span>
    {% endif %}
    {% if head.role %}
        <span class="badge bg-secondary">{{ head.role | safe }}</span>
    {% endif %}
    {% if head.time %}
        <span class="text-muted">{{ head.time }}</span>
    {% endif %}

    <span class="info-box-text">
        {% if head.user %}
            <a href="{{ head.user.url }}">{{ head.user.name }}</a>
        {% endif %}
        {% if head.post %}
            <a href="{{ head.post.url }}">{{ head.post.title }}</a>
        {% endif %}
    </span>
{% endmacro %}

{% macro Heads(heads) %}
    {% from 'card/base_card.html' import nonModal %}
{% for head in heads %}
    {{ nonModal(
        head=Head(head),collapse=false
    ) }}
{% endfor %}
{% endmacro %}


{% macro Line(line) %}
    {% set colors = ["primary", "secondary", "info", "success", "warning", "danger", "light", "dark", "purple", "pink", "teal", "orange"] %}
    {% set color = colors | random %}
    <div class="callout callout-{{ color }}">
        {{ line | safe }}
    </div>
{% endmacro %}




{% macro Images(images) %}
    {% if images %}
        <div class="row d-flex justify-content-start flex-wrap">
            {% for image in images %}
                <div class="p-2 d-flex align-items-center justify-content-center" style="flex: 1 1 25%; max-width: 25%; aspect-ratio: 1/1; overflow: hidden;">
                    <img src="{{ image }}" class="rounded shadow" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
                         data-bs-toggle="modal" data-bs-target="#imageModal{{ loop.index }}" onclick="setImageSrc('{{ image }}', {{ loop.index }})">
                </div>
            {% endfor %}
        </div>

        {% for image in images %}
            <!-- Bootstrap Modal for each image -->
            <div class="modal fade" id="imageModal{{ loop.index }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body text-center">
                            <img id="modalImage{{ loop.index }}" src="" class="img-fluid rounded shadow">
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}

        <script>

            function setImageSrc(imageSrc, index) {
                document.getElementById('modalImage' + index).src = imageSrc;
            }
        </script>
    {% endif %}
{% endmacro %}

{% macro ImageUp() %}
    <div id="image-upload-wrapper" class="d-flex flex-wrap align-items-center">
        <div id="upload-container" class="p-2 d-flex align-items-center justify-content-center image-box"
            style="flex: 1 1 25%; max-width: 25%; aspect-ratio: 1/1; overflow: hidden;">
            <label for="image-upload-input"
                class="rounded shadow d-flex align-items-center justify-content-center"
                style="width: 100%; height: 100%; object-fit: cover; cursor: pointer; background: #f0f0f0;">
                <span class="fs-1">+</span>
            </label>
            <input type="file" id="image-upload-input" multiple accept="image/*" style="display: none;"
                onchange="handleImageUpload(event)">
        </div>

        <div id="uploaded-images" class="d-flex flex-wrap"></div>
    </div>
    <div id="image-modals"></div>

    <script>
        function handleImageUpload(event) {
            const files = event.target.files;
            const container = document.getElementById("uploaded-images");
            const modalContainer = document.getElementById("image-modals");

            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageSrc = e.target.result;
                    const imageIndex = document.querySelectorAll("#uploaded-images .image-box").length;

                    // 创建外部容器
                    const imageWrapper = document.createElement("div");
                    imageWrapper.classList.add("p-2", "d-flex", "align-items-center", "justify-content-center", "image-box");
                    imageWrapper.style.flex = "1 1 25%";
                    imageWrapper.style.maxWidth = "25%";
                    imageWrapper.style.aspectRatio = "1/1";
                    imageWrapper.style.overflow = "hidden";

                    // 创建图片
                    const imgElem = document.createElement("img");
                    imgElem.src = imageSrc;
                    imgElem.classList.add("rounded", "shadow");
                    imgElem.style.width = "100%";
                    imgElem.style.height = "100%";
                    imgElem.style.objectFit = "cover";
                    imgElem.style.cursor = "pointer";
                    imgElem.setAttribute("data-bs-toggle", "modal");
                    imgElem.setAttribute("data-bs-target", "#imageModal" + imageIndex);
                    imgElem.onclick = function() { setImageSrc(imageSrc, imageIndex); };

                    imageWrapper.appendChild(imgElem);

                    // **确保上传图标始终在第一位**
                    container.insertBefore(imageWrapper, container.firstChild);

                    // 创建模态框
                    const modal = `
                        <div class="modal fade" id="imageModal${imageIndex}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-body text-center">
                                        <img id="modalImage${imageIndex}" src="" class="img-fluid rounded shadow">
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    modalContainer.innerHTML += modal;
                };
                reader.readAsDataURL(file);
            });
        }

        function setImageSrc(imageSrc, index) {
            document.getElementById('modalImage' + index).src = imageSrc;
        }
    </script>
{% endmacro %}

{# 可编辑的 Editor 宏 #}
{% macro Editor(editor) %}
    <textarea id="{{ editor.id }}">{{ editor.content | safe }}</textarea>

    <script>
        ClassicEditor
            .create(document.querySelector('#{{ editor.id }}'))
            .then(editorInstance => {
                editorInstance.setData(`{{ editor.content | safe }}`);
            })
            .catch(error => {
                console.error("Editor initialization error:", error);
            });
    </script>
{% endmacro %}

{% macro Reader(reader) %}
    <textarea id="{{ reader.id }}">{{ reader.content | safe }}"></textarea>

    <script>
        ClassicEditor
            .create(document.querySelector('#{{ reader.id }}'), {
                toolbar: [], // 禁用工具栏
                isReadOnly: true
            })
            .then(editorInstance => {
                editorInstance.setData(`{{ reader.content | safe }}`);
                editorInstance.isReadOnly = true;
            })
            .catch(error => {
                console.error("ReadOnlyEditor initialization error:", error);
            });
    </script>
{% endmacro %}


